<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				
				width: 400px;
				height: 700px;
				
			}
			.today{
				color: red;
				margin: 10px 0;
			}
			header{
				
				width: 380px;
				height: 100px;
				border: 3px solid lightgray;
			}
			.im{
				
				float: left;
				width: 150px;
				height: 100px;
			}
			.first{
				
				padding: 0px 0px;
				margin: 0px 170px;
			}
			.first .fir{
				color: red;
	
			}
			.ald{
				margin: 10px 0;
			}
			.clearfix:before,.clearfix:after{
				content:'';
				display:table;
				clear:both;
			}
			section{
				width: 400px;
				height: 400px;
				
				content: '';
				display: table;
				clear: both;
			}
			.movie{
				float: left;
				width: 200px;
				height: 200px;
				text-align: left;
				
				padding: 0;
			}
			.office{
				color: red;
				text-align: right;
				
			}
			ul{
				list-style: none;
			}
			.movie span{
				font-style: italic;
			}
			.second,.third{
				color: red;
			}
			ul li{
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<h2 class="today">今日票房</h2>
			<header class="clearfix">
				<div class="im">
					<img src="img/405a620b8be8e3b05d08fcde86be781b6998847.jpg" alt="" width="100%" height="100%" />
				</div>				
				<div class="first">
					<h2 class="ald">阿拉丁</h2>
					<p>
						<span class="fir">464.54万</span>					
					</p>
				</div>				
			</header>
			<section>
				<ul class="movie">
					<li><span class="second">2</span>&nbsp;五月天人生有限公司</li>
					<li><span class="third">3</span>&nbsp;大侦探皮卡丘</li>
					<li><span>4</span>&nbsp;一天狗的使命2</li>
					<li><span>5</span>&nbsp;何以为家</li>
					<li><span>6</span>&nbsp;一个母亲的复仇</li>
				</ul>
				<ul class="office">
					<li>180.5万</li>
					<li>173.67万</li>
					<li>139.72万</li>
					<li>97.13万</li>
					<li>57.52万</li>
				</ul>
			</section>
		</div>
	</body>
</html>
